<div  class="content-wrapper" [@routerTransition]>
    <sub-header idName="Administration.Settings.Tenant" [title]="'Settings' | localize" [description]="'SettingsHeaderInfo' | localize">
        <div role="actions">
            <button class="btn btn-primary" (click)="saveAll()"><i class="la la-floppy-o"></i>
                {{"SaveAll" | localize}}</button>
        </div>
    </sub-header>
    <section class="content d-flex flex-column flex-column-fluid">
        <div [class]="containerClass">
            <div class="card card-custom gutter-b">
                <div class="card-body">
                    <tabset *ngIf="settings">
                        <tab class="p-5" heading="{{'General' | localize}}">
                            <div class="form-group form-md-line-input form-md-floating-label no-hint" *ngIf="!isMultiTenancyEnabled && showTimezoneSelection">
                                <label for="Timezone">{{"Timezone" | localize}}</label>
                                <timezone-combo class="edited" name="Timezone" [(ngModel)]="settings.general.timezone"
                                                defaultTimezoneScope="{{defaultTimezoneScope}}"></timezone-combo>
                            </div>

                            <div class="checkbox-list">
                                <div class="form-group" *ngIf="!isMultiTenancyEnabled">
                                    <label for="Setting_StaticPage" class="checkbox"
                                           style="margin-bottom: 0">
                                        <input id="Setting_StaticPage" type="checkbox"
                                               name="Setting_StaticPage"
                                               [(ngModel)]="settings.otherSettings.staticPage">
                                        <span></span>
                                        {{"StaticPage" | localize}}
                                    </label>
                                    <span class="form-text text-muted">{{"StaticPage_Hint" | localize}}</span>
                                </div>
                                <div class="form-group" *ngIf="!isMultiTenancyEnabled">
                                    <label for="Setting_RecordClicks" class="checkbox"
                                           style="margin-bottom: 0">
                                        <input id="Setting_RecordClicks" type="checkbox"
                                               name="Setting_RecordClicks"
                                               [(ngModel)]="settings.otherSettings.recordClicks">
                                        <span></span>
                                        {{"RecordClicks" | localize}}
                                    </label>
                                    <span class="form-text text-muted">{{"RecordClicks_Hint" | localize}}</span>
                                </div>
                                <div class="form-group" *ngIf="!isMultiTenancyEnabled">
                                    <label for="Setting_CacheListResult" class="checkbox"
                                           style="margin-bottom: 0">
                                        <input id="Setting_CacheListResult" type="checkbox"
                                               name="Setting_CacheListResult"
                                               [(ngModel)]="settings.otherSettings.cacheListResult">
                                        <span></span>
                                        {{"CacheListResult" | localize}}
                                    </label>
                                    <span class="form-text text-muted">{{"CacheListResult_Hint" | localize}}</span>
                                </div>

                                <div class="form-group" *ngIf="showDataSynchronous">
                                    <label for="Setting_DataSynchronous" class="checkbox"
                                           style="margin-bottom: 0">
                                        <input id="Setting_DataSynchronous" type="checkbox"
                                               name="Setting_DataSynchronous"
                                               [(ngModel)]="settings.otherSettings.dataSynchronous">
                                        <span></span>
                                        {{"DataSynchronous" | localize}}
                                    </label>
                                </div>
                                <div class="form-group" [hidden]="!settings.otherSettings.dataSynchronous">
                                    <label for="Setting_AutoSynchronous" class="checkbox"
                                           style="margin-bottom: 0">
                                        <input id="Setting_AutoSynchronous" type="checkbox"
                                               name="Setting_AutoSynchronous"
                                               [(ngModel)]="settings.otherSettings.autoSynchronous">
                                        <span></span>
                                        {{"AutoSynchronous" | localize}}
                                    </label>
                                </div>

                                <div class="form-group">
                                    <label for="homeSetGrey" class="checkbox"
                                           style="margin-bottom: 0">
                                        <input id="homeSetGrey" type="checkbox"
                                               name="homeSetGrey"
                                               [(ngModel)]="settings.otherSettings.homeSetGrey">
                                        <span></span>
                                        {{"HomeSetGrey" | localize}}
                                    </label>
                                </div>
                                <div class="form-group" *ngIf="!isMultiTenancyEnabled">
                                    <label for="EnableTemporarilyClosed" class="checkbox"
                                           style="margin-bottom: 0">
                                        <input id="EnableTemporarilyClosed" type="checkbox"
                                               name="EnableTemporarilyClosed"
                                               [(ngModel)]="settings.otherSettings.enableTemporarilyClosed">
                                        <span></span>
                                        {{"EnableTemporarilyClosed" | localize}}
                                    </label>
                                </div>
                                <div class="form-group" [hidden]="!settings.otherSettings.enableTemporarilyClosed">
                                    <label for="shutDownTenantSite" class="checkbox"
                                           style="margin-bottom: 0">
                                        <input id="shutDownTenantSite" type="checkbox"
                                               name="shutDownTenantSite"
                                               [(ngModel)]="settings.otherSettings.shutDownTenantSite">
                                        <span></span>
                                        {{"ShutDownTenantSite" | localize}}
                                    </label>
                                </div>
                            </div>

                            <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                <label>{{"ShutDownPage" | localize}}</label>
                                <input type="text" name="ShutDownPage" class="form-control" [ngClass]="{'edited':settings.otherSettings.shutDownPage}" [(ngModel)]="settings.otherSettings.shutDownPage">
                            </div>

                            <div class="form-group form-md-line-input form-md-floating-label no-hint" *ngIf="false">
                                <label>节假日期（工作日但要放假的）</label>
                                <textarea class="form-control" rows="4" [ngClass]="{'edited': settings.otherSettings.jiaRi}" name="jiaRi" [(ngModel)]="settings.otherSettings.jiaRi"></textarea>
                            </div>
                            <div class="form-group form-md-line-input form-md-floating-label no-hint" *ngIf="false">
                                <label>调休日期（周末但要上班的）</label>
                                <textarea class="form-control" rows="4" [ngClass]="{'edited': settings.otherSettings.tiaoXiu}" name="tiaoXiu" [(ngModel)]="settings.otherSettings.tiaoXiu"></textarea>
                            </div>
                            <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                <label>ICP</label>
                                <input type="text" name="icp" class="form-control" [ngClass]="{'edited':settings.otherSettings.icp}" [(ngModel)]="settings.otherSettings.icp">
                            </div>
                            <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                <label>CopyRight</label>
                                <input type="text" name="copyRight" class="form-control" [ngClass]="{'edited':settings.otherSettings.copyRight}" [(ngModel)]="settings.otherSettings.copyRight">
                            </div>
                            <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                <label>CaseNumber</label>
                                <input type="text" name="caseNumber" class="form-control" [ngClass]="{'edited':settings.otherSettings.caseNumber}" [(ngModel)]="settings.otherSettings.caseNumber">
                            </div>
                            <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                <label>{{"Name" | localize}}</label>
                                <input type="text" name="applicationName" class="form-control" [ngClass]="{'edited':settings.otherSettings.applicationName}" [(ngModel)]="settings.otherSettings.applicationName" maxlength="256">
                            </div>
                            <div class="form-group form-md-line-input form-md-floating-label no-hint" *ngIf="false">
                                <label>{{"Email" | localize}}</label>
                                <input type="text" name="contactEmail" class="form-control" [ngClass]="{'edited':settings.otherSettings.eMail}" [(ngModel)]="settings.otherSettings.eMail" maxlength="128">
                            </div>
                            <div class="form-group form-md-line-input form-md-floating-label no-hint" *ngIf="false">
                                <label>{{"Tel" | localize}}</label>
                                <input type="text" name="contactTel" class="form-control" [ngClass]="{'edited':settings.otherSettings.telephone}" [(ngModel)]="settings.otherSettings.telephone" maxlength="128">
                            </div>
                            <div class="form-group form-md-line-input form-md-floating-label no-hint" *ngIf="false">
                                <label>{{"Address" | localize}}</label>
                                <input type="text" name="contactAdress" class="form-control" [ngClass]="{'edited':settings.otherSettings.address}" [(ngModel)]="settings.otherSettings.address" maxlength="256">
                            </div>
                        </tab>

                        <tab class="p-5" heading="{{'UserManagement' | localize}}">
                            <div class="form">
                                <h5  *ngIf="false">{{"FormBasedRegistration" | localize}}</h5>
                                <div class="checkbox-list" *ngIf="false">
                                    <div class="form-group">
                                        <label for="Setting_AllowSelfRegistration" class="checkbox"
                                               style="margin-bottom: 0">
                                            <input id="Setting_AllowSelfRegistration" class="check" type="checkbox"
                                                   name="AllowSelfRegistration"
                                                   [(ngModel)]="settings.userManagement.allowSelfRegistration">
                                            <span></span>
                                            {{"AllowUsersToRegisterThemselves" | localize}}
                                        </label>
                                        <span class="form-text text-muted">{{"AllowUsersToRegisterThemselves_Hint" | localize}}</span>
                                    </div>
                                    <div class="form-group" [hidden]="!settings.userManagement.allowSelfRegistration">
                                        <label for="Setting_IsNewRegisteredUserActiveByDefault" class="checkbox"
                                               style="margin-bottom: 0">
                                            <input id="Setting_IsNewRegisteredUserActiveByDefault" type="checkbox"
                                                   name="IsNewRegisteredUserActiveByDefault"
                                                   [(ngModel)]="settings.userManagement.isNewRegisteredUserActiveByDefault">
                                            <span></span>
                                            {{"NewRegisteredUsersIsActiveByDefault" | localize}}
                                        </label>
                                        <span class="form-text text-muted">{{"NewRegisteredUsersIsActiveByDefault_Hint" | localize}}</span>
                                    </div>
                                    <div class="form-group" [hidden]="!settings.userManagement.allowSelfRegistration">
                                        <label for="Setting_UseCaptchaOnRegistration" class="checkbox">
                                            <input id="Setting_UseCaptchaOnRegistration" type="checkbox"
                                                   name="UseCaptchaOnRegistration"
                                                   [(ngModel)]="settings.userManagement.useCaptchaOnRegistration">
                                            <span></span>
                                            {{"UseCaptchaOnRegistration" | localize}}
                                        </label>
                                    </div>
                                    <div class="form-group">
                                        <label for="Setting_UseCaptchaOnLogin" class="checkbox">
                                            <input id="Setting_UseCaptchaOnLogin" type="checkbox"
                                                   name="UseCaptchaOnLogin"
                                                   [(ngModel)]="settings.userManagement.useCaptchaOnLogin">
                                            <span></span>
                                            {{"UseCaptchaOnLogin" | localize}}
                                        </label>
                                    </div>
                                </div>

                                <div class="checkbox-list" *ngIf="false">
                                    <h5 *ngIf="false">{{"CookieConsent" | localize}}</h5>
                                    <label for="Settings_IsCookieConsentEnabled" class="checkbox">
                                        <input id="Settings_IsCookieConsentEnabled" class="md-check" type="checkbox"
                                               name="IsCookieConsentEnabled"
                                               [(ngModel)]="settings.userManagement.isCookieConsentEnabled">
                                        <span></span>
                                        {{"IsCookieConsentEnabled" | localize}}
                                    </label>
                                    <h5>{{"SessionTimeOut" | localize}}</h5>
                                    <label for="Setting_IsSessionTimeOutEnabled" class="checkbox">
                                        <input id="Setting_IsSessionTimeOutEnabled" class="md-check" type="checkbox"
                                               name="IsEnabled"
                                               [(ngModel)]="settings.userManagement.sessionTimeOutSettings.isEnabled">
                                        <span></span>
                                        {{"IsSessionTimeOutEnabled" | localize}}
                                    </label>
                                    <label *ngIf="settings.userManagement.sessionTimeOutSettings.isEnabled"
                                           for="Setting_ShowLockScreenWhenTimedOut" class="checkbox">
                                        <input id="Setting_ShowLockScreenWhenTimedOut" class="md-check" type="checkbox"
                                               name="IsEnabled"
                                               [(ngModel)]="settings.userManagement.sessionTimeOutSettings.showLockScreenWhenTimedOut">
                                        <span></span>
                                        {{"ShowLockScreenWhenTimedOut" | localize}}
                                    </label>
                                    <div class="form-group"
                                         *ngIf="settings.userManagement.sessionTimeOutSettings.isEnabled">
                                        <label for="Setting_SessionTimeOutSecond">{{"SessionTimeOutSecond" | localize}}</label>
                                        <input id="Setting_SessionTimeOutSecond" type="number" name="TimeOutSecond"
                                               class="form-control" min="1"
                                               [ngClass]="{'edited':settings.userManagement.sessionTimeOutSettings.timeOutSecond}"
                                               [(ngModel)]="settings.userManagement.sessionTimeOutSettings.timeOutSecond">
                                    </div>
                                    <div class="form-group"
                                         *ngIf="settings.userManagement.sessionTimeOutSettings.isEnabled">
                                        <label for="Setting_ShowTimeOutNotificationSecond">{{"ShowTimeOutNotificationSecond" | localize}}</label>
                                        <input id="Setting_ShowTimeOutNotificationSecond" type="number"
                                               name="ShowTimeOutNotificationSecond" class="form-control" min="1"
                                               [ngClass]="{'edited':settings.userManagement.sessionTimeOutSettings.showTimeOutNotificationSecond}"
                                               [(ngModel)]="settings.userManagement.sessionTimeOutSettings.showTimeOutNotificationSecond">
                                    </div>
                                </div>
                            </div>

                            <div *ngIf="settings.ldap.isModuleEnabled">
                                <h5 class="mt-4">{{"LdapSettings" | localize}}</h5>
                                <label for="Setting_LdapIsEnabled" class="checkbox">
                                    <input id="Setting_LdapIsEnabled" type="checkbox" name="LdapIsEnabled"
                                           [(ngModel)]="settings.ldap.isEnabled">
                                    <span></span>
                                    {{"EnableLdapAuthentication" | localize}}
                                </label>
                                <div class="form-group" [hidden]="!settings.ldap.isEnabled">
                                    <label for="LdapDomainName">{{"DomainName" | localize}}</label>
                                    <input id="LdapDomainName" type="text" name="LdapDomainName" class="form-control"
                                           [(ngModel)]="settings.ldap.domain" maxlength="128">
                                </div>
                                <div class="form-group" [hidden]="!settings.ldap.isEnabled">
                                    <label for="LdapUserName">{{"UserName" | localize}}</label>
                                    <input id="LdapUserName" type="text" name="LdapUserName" class="form-control"
                                           [(ngModel)]="settings.ldap.userName" maxlength="128">
                                </div>
                                <div class="form-group" [hidden]="!settings.ldap.isEnabled">
                                    <label for="LdapPassword">{{"Password" | localize}}</label>
                                    <input id="LdapPassword" type="password" name="LdapPassword" class="form-control"
                                           [(ngModel)]="settings.ldap.password" maxlength="128">
                                </div>
                            </div>
                            <div>
                                <h5 class="mt-4">{{"OtherSettings" | localize}}</h5>
                                <label for="Setting_IsEmailConfirmationRequiredForLogin" class="checkbox">
                                    <input id="Setting_IsEmailConfirmationRequiredForLogin" type="checkbox"
                                           name="IsEmailConfirmationRequiredForLogin"
                                           [(ngModel)]="settings.userManagement.isEmailConfirmationRequiredForLogin">
                                    <span></span>
                                    {{"EmailConfirmationRequiredForLogin" | localize}}
                                </label>
                                <h5  *ngIf="false">{{"Profile" | localize}}</h5>
                                <label  *ngIf="false" for="Setting_AllowUsingGravatarProfilePicture" class="checkbox">
                                    <input id="Setting_AllowUsingGravatarProfilePicture" class="md-check"
                                           type="checkbox" name="AllowUsingGravatarProfilePicture"
                                           [(ngModel)]="settings.userManagement.allowUsingGravatarProfilePicture">
                                    <span></span>
                                    {{"AllowUsingGravatarProfilePicture" | localize}}
                                </label>
                            </div>
                        </tab>
                        <tab class="p-5" *ngIf="true" heading="{{'Security' | localize}}">
                            <!-- *ngIf="true" is a workaround for https://github.com/valor-software/ng2-bootstrap/issues/823 -->
                            <div>
                                <h5>{{"PasswordComplexity" | localize}}</h5>
                                <label for="Setting_PasswordComplexity_UseDefaultSettings" class="checkbox">
                                    <input id="Setting_PasswordComplexity_UseDefaultSettings" type="checkbox"
                                           name="Setting_PasswordComplexity_UseDefaultSettings"
                                           [(ngModel)]="settings.security.useDefaultPasswordComplexitySettings">
                                    <span></span>
                                    {{"UseDefaultSettings" | localize}}
                                </label>
                                <div class="p-5">
                                    <div class="checkbox-list">
                                        <label for="Setting_PasswordComplexity_RequireDigit" class="checkbox">
                                            <input id="Setting_PasswordComplexity_RequireDigit" type="checkbox"
                                                   name="Setting_PasswordComplexity_RequireDigit"
                                                   [(ngModel)]="settings.security.passwordComplexity.requireDigit"
                                                   *ngIf="!settings.security.useDefaultPasswordComplexitySettings">
                                            <input id="Setting_PasswordComplexity_RequireDigit" type="checkbox"
                                                   name="Setting_PasswordComplexity_RequireDigit"
                                                   [(ngModel)]="settings.security.defaultPasswordComplexity.requireDigit"
                                                   *ngIf="settings.security.useDefaultPasswordComplexitySettings"
                                                   disabled>
                                            <span></span>
                                            {{"PasswordComplexity_RequireDigit" | localize}}
                                        </label>
                                        <label for="Setting_PasswordComplexity_RequireLowercase" class="checkbox">
                                            <input id="Setting_PasswordComplexity_RequireLowercase" type="checkbox"
                                                   name="Setting_PasswordComplexity_RequireLowercase"
                                                   [(ngModel)]="settings.security.passwordComplexity.requireLowercase"
                                                   *ngIf="!settings.security.useDefaultPasswordComplexitySettings">
                                            <input id="Setting_PasswordComplexity_RequireLowercase" type="checkbox"
                                                   name="Setting_PasswordComplexity_RequireLowercase"
                                                   [(ngModel)]="settings.security.defaultPasswordComplexity.requireLowercase"
                                                   *ngIf="settings.security.useDefaultPasswordComplexitySettings"
                                                   disabled>
                                            <span></span>
                                            {{"PasswordComplexity_RequireLowercase" | localize}}
                                        </label>
                                        <label for="Setting_PasswordComplexity_RequireNonAlphanumeric" class="checkbox">
                                            <input id="Setting_PasswordComplexity_RequireNonAlphanumeric"
                                                   type="checkbox"
                                                   name="Setting_PasswordComplexity_RequireNonAlphanumeric"
                                                   [(ngModel)]="settings.security.passwordComplexity.requireNonAlphanumeric"
                                                   *ngIf="!settings.security.useDefaultPasswordComplexitySettings">
                                            <input id="Setting_PasswordComplexity_RequireNonAlphanumeric"
                                                   type="checkbox"
                                                   name="Setting_PasswordComplexity_RequireNonAlphanumeric"
                                                   [(ngModel)]="settings.security.defaultPasswordComplexity.requireNonAlphanumeric"
                                                   *ngIf="settings.security.useDefaultPasswordComplexitySettings"
                                                   disabled>
                                            <span></span>
                                            {{"PasswordComplexity_RequireNonAlphanumeric" | localize}}
                                        </label>
                                        <label for="Setting_PasswordComplexity_RequireUppercase" class="checkbox">
                                            <input id="Setting_PasswordComplexity_RequireUppercase" type="checkbox"
                                                   name="Setting_PasswordComplexity_RequireUppercase"
                                                   [(ngModel)]="settings.security.passwordComplexity.requireUppercase"
                                                   *ngIf="!settings.security.useDefaultPasswordComplexitySettings">
                                            <input id="Setting_PasswordComplexity_RequireUppercase" type="checkbox"
                                                   name="Setting_PasswordComplexity_RequireUppercase"
                                                   [(ngModel)]="settings.security.defaultPasswordComplexity.requireUppercase"
                                                   *ngIf="settings.security.useDefaultPasswordComplexitySettings"
                                                   disabled>
                                            <span></span>
                                            {{"PasswordComplexity_RequireUppercase" | localize}}
                                        </label>
                                    </div>
                                    <div class="form-group">
                                        <label>{{"PasswordComplexity_RequiredLength" | localize}}</label>
                                        <input type="number" name="RequiredLength" class="form-control"
                                               [ngClass]="{'edited':settings.security.passwordComplexity.requiredLength}"
                                               [(ngModel)]="settings.security.passwordComplexity.requiredLength"
                                               *ngIf="!settings.security.useDefaultPasswordComplexitySettings">
                                        <input type="number" name="RequiredLength" class="form-control"
                                               [ngClass]="{'edited':settings.security.defaultPasswordComplexity.requiredLength}"
                                               [(ngModel)]="settings.security.defaultPasswordComplexity.requiredLength"
                                               *ngIf="settings.security.useDefaultPasswordComplexitySettings" disabled>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <h5>{{"UserLockOut" | localize}}</h5>
                                <div class="md-checkbox-list">
                                    <div>
                                        <label for="Setting_UserLockOut_IsEnabled" class="checkbox">
                                            <input id="Setting_UserLockOut_IsEnabled" type="checkbox"
                                                   name="Setting_UserLockOut_IsEnabled"
                                                   [(ngModel)]="settings.security.userLockOut.isEnabled">
                                            <span></span>
                                            {{"EnableUserAccountLockingOnFailedLoginAttemts" | localize}}
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group" *ngIf="settings.security.userLockOut.isEnabled">
                                    <label
                                        for="MaxFailedAccessAttemptsBeforeLockout">{{"MaxFailedAccessAttemptsBeforeLockout" | localize}}</label>
                                    <input id="MaxFailedAccessAttemptsBeforeLockout" type="number"
                                           name="MaxFailedAccessAttemptsBeforeLockout" class="form-control"
                                           [ngClass]="{'edited':settings.security.userLockOut.maxFailedAccessAttemptsBeforeLockout}"
                                           [(ngModel)]="settings.security.userLockOut.maxFailedAccessAttemptsBeforeLockout">
                                </div>
                                <div class="form-group" *ngIf="settings.security.userLockOut.isEnabled">
                                    <label
                                        for="DefaultAccountLockoutSeconds">{{"DefaultAccountLockoutDurationAsSeconds" | localize}}</label>
                                    <input id="DefaultAccountLockoutSeconds" type="number"
                                           name="DefaultAccountLockoutSeconds" class="form-control"
                                           [ngClass]="{'edited':settings.security.userLockOut.defaultAccountLockoutSeconds}"
                                           [(ngModel)]="settings.security.userLockOut.defaultAccountLockoutSeconds">
                                </div>
                            </div>
                            <div
                                *ngIf="!isMultiTenancyEnabled || settings.security.twoFactorLogin.isEnabledForApplication">
                                <h5>{{"TwoFactorLogin" | localize}}</h5>
                                <div class="checkbox-list">
                                    <label for="Setting_TwoFactorLogin_IsEnabled" class="checkbox">
                                        <input id="Setting_TwoFactorLogin_IsEnabled" type="checkbox"
                                               name="Setting_TwoFactorLogin_IsEnabled"
                                               [(ngModel)]="settings.security.twoFactorLogin.isEnabled">
                                        <span></span>
                                        {{"EnableTwoFactorLogin" | localize}}
                                    </label>
                                    <label for="Setting_TwoFactorLogin_IsEmailProviderEnabled" class="checkbox"
                                           *ngIf="settings.security.twoFactorLogin.isEnabled && !isMultiTenancyEnabled">
                                        <input id="Setting_TwoFactorLogin_IsEmailProviderEnabled" type="checkbox"
                                               name="Setting_TwoFactorLogin_IsEmailProviderEnabled"
                                               [(ngModel)]="settings.security.twoFactorLogin.isEmailProviderEnabled">
                                        <span></span>
                                        {{"IsEmailVerificationEnabled" | localize}}
                                    </label>
                                    <label for="Setting_TwoFactorLogin_IsSmsProviderEnabled" class="checkbox"
                                           *ngIf="settings.security.twoFactorLogin.isEnabled && !isMultiTenancyEnabled">
                                        <input id="Setting_TwoFactorLogin_IsSmsProviderEnabled" type="checkbox"
                                               name="Setting_TwoFactorLogin_IsSmsProviderEnabled"
                                               [(ngModel)]="settings.security.twoFactorLogin.isSmsProviderEnabled">
                                        <span></span>
                                        {{"IsSmsVerificationEnabled" | localize}}
                                    </label>
                                    <label for="Setting_TwoFactorLogin_IsGoogleAuthenticatorEnabled" class="checkbox"
                                           *ngIf="settings.security.twoFactorLogin.isEnabled && !isMultiTenancyEnabled">
                                        <input id="Setting_TwoFactorLogin_IsGoogleAuthenticatorEnabled" type="checkbox"
                                               name="Setting_TwoFactorLogin_IsGoogleAuthenticatorEnabled"
                                               [(ngModel)]="settings.security.twoFactorLogin.isGoogleAuthenticatorEnabled">
                                        <span></span>
                                        {{"IsGoogleAuthenticatorEnabled" | localize}}
                                    </label>
                                    <label for="Setting_TwoFactorLogin_IsRememberBrowserEnabled" class="checkbox"
                                           *ngIf="settings.security.twoFactorLogin.isEnabled">
                                        <input id="Setting_TwoFactorLogin_IsRememberBrowserEnabled" type="checkbox"
                                               name="Setting_TwoFactorLogin_IsRememberBrowserEnabled"
                                               [(ngModel)]="settings.security.twoFactorLogin.isRememberBrowserEnabled">
                                        <span></span>
                                        {{"AllowToRememberBrowserForTwoFactorLogin" | localize}}
                                    </label>
                                </div>
                            </div>
                            <div *ngIf="!isMultiTenancyEnabled">
                                <h5>{{"OneConcurrentLoginPerUser" | localize}}</h5>
                                <div class="checkbox-list">
                                    <label for="Setting_IsOneConcurrentLoginPerUserActive" class="checkbox">
                                        <input id="Setting_IsOneConcurrentLoginPerUserActive" type="checkbox"
                                               name="Setting_IsOneConcurrentLoginPerUserActive"
                                               [(ngModel)]="settings.security.allowOneConcurrentLoginPerUser">
                                        <span></span>
                                        {{"OneConcurrentLoginPerUserActive" | localize}}
                                    </label>
                                </div>
                            </div>

                            <div>
                                <h5>{{"UserPasswordExpires" | localize}}</h5>
                                <div class="md-checkbox-list">
                                    <div>
                                        <label for="UserPasswordExpires_IsEnabled" class="checkbox">
                                            <input id="UserPasswordExpires_IsEnabled" type="checkbox"
                                                   name="UserPasswordExpires_IsEnabled"
                                                   [(ngModel)]="settings.security.userPasswordExpires.isEnabled">
                                            <span></span>
                                            {{"EnableUserPasswordExpires" | localize}}
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group" *ngIf="settings.security.userPasswordExpires.isEnabled">
                                    <label
                                        for="MaximumNumberOfDaysBetweenPasswordChange">{{"MaximumNumberOfDaysBetweenPasswordChange" | localize}}</label>
                                    <input id="MaximumNumberOfDaysBetweenPasswordChange" type="number"
                                           name="MaximumNumberOfDaysBetweenPasswordChange" class="form-control"
                                           [ngClass]="{'edited':settings.security.userPasswordExpires.maximumNumberOfDays}"
                                           [(ngModel)]="settings.security.userPasswordExpires.maximumNumberOfDays">
                                </div>
                            </div>
                        </tab>

                        <tab class="p-5" heading="{{'FileSetting' | localize}}">
                            <div class="form-group form-md-line-input form-md-floating-label no-hint margin-top-10">
                                <label>{{"FileDownloadExName" | localize}}</label>
                                <input type="text" class="form-control" [ngClass]="{'edited':settings.otherSettings.fileDownloadExName}"
                                       [(ngModel)]="settings.otherSettings.fileDownloadExName" maxlength="500">
                            </div>
                            <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                <label>{{"FileDownloadDirectories" | localize}}</label>
                                <input type="text" class="form-control" [ngClass]="{'edited':settings.otherSettings.fileDownloadDirectories}"
                                       [(ngModel)]="settings.otherSettings.fileDownloadDirectories" maxlength="300">
                            </div>
                            <div class="form-group form-md-line-input form-md-floating-label no-hint margin-top-10">
                                <label>{{"FileUploadExName" | localize}}</label>
                                <input type="text" class="form-control" [ngClass]="{'edited':settings.otherSettings.fileUploadExName}"
                                       [(ngModel)]="settings.otherSettings.fileUploadExName" maxlength="500">
                            </div>
                            <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                <label>{{"FileUploadMaxSize" | localize}}</label>
                                <input type="number" class="form-control" [ngClass]="{'edited':settings.otherSettings.fileUploadMaxSize}"
                                       [(ngModel)]="settings.otherSettings.fileUploadMaxSize" maxlength="4">
                            </div>
                            <div class="form-group form-md-line-input form-md-floating-label no-hint">
                                <label>{{"ImageConfigEncoderQuality" | localize}}</label>
                                <input type="number" class="form-control" [ngClass]="{'edited':settings.otherSettings.imageConfigEncoderQuality}"
                                       [(ngModel)]="settings.otherSettings.imageConfigEncoderQuality" maxlength="2">
                            </div>
                            <div class="checkbox-list">
                                <div class="form-group" >
                                    <label for="Settings_WaterMarkIsAllowed" class="checkbox"
                                           style="margin-bottom: 0">
                                        <input id="Settings_WaterMarkIsAllowed" type="checkbox"
                                               name="Settings_WaterMarkIsAllowed"
                                               [(ngModel)]="settings.otherSettings.waterMarkIsAllowed">
                                        <span></span>
                                        {{"WaterMarkIsAllowed" | localize}}
                                    </label>
                                </div>
                            </div>
                            <div class="form-group form-md-line-input form-md-floating-label no-hint" [hidden]="!settings.otherSettings.waterMarkIsAllowed">
                                <label>{{"WaterMarkText" | localize}}</label>
                                <input type="text" class="form-control" [ngClass]="{'edited':settings.otherSettings.waterMarkText}"
                                       [(ngModel)]="settings.otherSettings.waterMarkText" maxlength="300">
                            </div>
                            <div class="row"  [hidden]="!settings.otherSettings.waterMarkIsAllowed">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>{{"WaterMarkImagePath" | localize}}</label>
                                        <input type="file"  id="ImgUpload"
                                               ng2FileSelect  (change)="onWaterMarkImageInputChange($event)">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <a (click)="lookOver(settings.otherSettings.waterMarkImagePath)" *ngIf="settings.otherSettings.waterMarkImagePath">
                                        <img [attr.src]="getUrl(settings.otherSettings.waterMarkImagePath)" class="bg-gray" style="height:60px;" />
                                    </a>
                                </div>
                            </div>
                        </tab>

                        <tab class="p-5" heading="{{'EmailSmtp' | localize}}"
                             *ngIf="!isMultiTenancyEnabled || appSession.application.allowTenantsToChangeEmailSettings">
                            <div class="form-group m-form__group" *ngIf="isMultiTenancyEnabled">
                                <label for="Settings_UseHostDefaultEmailSettings" class="checkbox">
                                    <input id="Settings_UseHostDefaultEmailSettings" type="checkbox"
                                           name="UseHostDefaultEmailSettings"
                                           [(ngModel)]="settings.email.useHostDefaultEmailSettings">
                                    <span></span>
                                    {{"UseHostDefaultEmailSettings" | localize}}
                                </label>
                            </div>
                            <div [hidden]="settings.email.useHostDefaultEmailSettings">
                                <form class="form" #emailSmtpSettingsForm="ngForm" method="post">
                                    <div class="form-group">
                                        <label for="DefaultFromAddress">{{"DefaultFromAddress" | localize}}</label>
                                        <input id="DefaultFromAddress" type="email" name="DefaultFromAddress"
                                               #defaultFromAddressInput="ngModel"
                                               class="form-control"
                                               [ngClass]="{'edited':settings.email.defaultFromAddress}"
                                               [(ngModel)]="settings.email.defaultFromAddress" maxlength="128" email>
                                        <validation-messages [formCtrl]="defaultFromAddressInput"></validation-messages>
                                    </div>
                                    <div class="form-group">
                                        <label
                                            for="DefaultFromDisplayName">{{"DefaultFromDisplayName" | localize}}</label>
                                        <input id="DefaultFromDisplayName" type="text" name="DefaultFromDisplayName"
                                               class="form-control"
                                               [ngClass]="{'edited':settings.email.defaultFromDisplayName}"
                                               [(ngModel)]="settings.email.defaultFromDisplayName" maxlength="128">
                                    </div>
                                    <div class="form-group">
                                        <label for="SmtpHost">{{"SmtpHost" | localize}}</label>
                                        <input id="SmtpHost" type="text" name="SmtpHost" class="form-control"
                                               [ngClass]="{'edited':settings.email.smtpHost}"
                                               [(ngModel)]="settings.email.smtpHost" maxlength="64">
                                    </div>
                                    <div class="form-group">
                                        <label for="SmtpPort">{{"SmtpPort" | localize}}</label>
                                        <input id="SmtpPort" type="number" name="SmtpPort" class="form-control"
                                               [ngClass]="{'edited':settings.email.smtpPort}"
                                               [(ngModel)]="settings.email.smtpPort" maxlength="5">
                                    </div>
                                </form>
                                <div class="checkbox-list">
                                    <label for="Settings_SmtpEnableSsl" class="checkbox">
                                        <input id="Settings_SmtpEnableSsl" type="checkbox" name="SmtpEnableSsl"
                                               [(ngModel)]="settings.email.smtpEnableSsl"> {{"UseSsl" | localize}}
                                        <span></span>
                                    </label>
                                    <label for="Settings_SmtpUseDefaultCredentials" class="checkbox">
                                        <input id="Settings_SmtpUseDefaultCredentials" type="checkbox"
                                               name="SmtpUseDefaultCredentials"
                                               [(ngModel)]="settings.email.smtpUseDefaultCredentials">
                                        <span></span>
                                        {{"UseDefaultCredentials" | localize}}
                                    </label>
                                </div>
                                <div class="form-group" [hidden]="settings.email.smtpUseDefaultCredentials">
                                    <label for="SmtpDomainName">{{"DomainName" | localize}}</label>
                                    <input id="SmtpDomainName" type="text" name="SmtpDomainName" class="form-control"
                                           [ngClass]="{'edited':settings.email.smtpDomain}"
                                           [(ngModel)]="settings.email.smtpDomain" maxlength="128">
                                </div>
                                <div class="form-group" [hidden]="settings.email.smtpUseDefaultCredentials">
                                    <label for="SmtpUserName">{{"UserName" | localize}}</label>
                                    <input id="SmtpUserName" type="text" name="SmtpUserName" class="form-control"
                                           [ngClass]="{'edited':settings.email.smtpUserName}"
                                           [(ngModel)]="settings.email.smtpUserName" maxlength="128">
                                </div>
                                <div class="form-group" *ngIf="!setRandomPassword"
                                     [hidden]="settings.email.smtpUseDefaultCredentials">
                                    <label for="SmtpPassword">{{"Password" | localize}}</label>
                                    <input id="SmtpPassword" type="password" name="SmtpPassword" class="form-control"
                                           [ngClass]="{'edited':settings.email.smtpPassword}"
                                           [(ngModel)]="settings.email.smtpPassword" maxlength="128">
                                </div>
                            </div>
                            <hr/>
                            <h5>{{"TestEmailSettingsHeader" | localize}}</h5>
                            <div class="row">
                                <div class="col-md-4">
                                    <form class="form" #emailSmtpSettingsTestForm="ngForm">
                                        <div class="form-group">
                                            <input type="email" name="testEmailAddress" #testEmailAddressInput="ngModel"
                                                   class="form-control" [ngClass]="{'edited':testEmailAddress}"
                                                   [(ngModel)]="testEmailAddress" maxlength="256" email>
                                            <validation-messages
                                                [formCtrl]="testEmailAddressInput"></validation-messages>
                                        </div>
                                    </form>
                                </div>
                                <div class="form-group col-md-2">
                                    <button class="btn btn-primary" type="button"
                                            (click)="sendTestEmail()"
                                            [disabled]="!emailSmtpSettingsTestForm.form.valid">{{"SendTestEmail" | localize}}</button>
                                </div>
                            </div>
                        </tab>
                    </tabset>
                </div>
            </div>
        </div>
    </section>
</div>
